<template>
  <div class="contact box bg clmcenter">
    <div class="btn_contact btn_goback" @click="goBack">
      <span>BACK</span>
    </div>
    <div class="contact_container clmcenter">
      <p class="title">CONTACT US</p>
      <div class="from_container clmstart">
        <form class="contact_form">
          <div class="form_item form_item_name">
            <label>Name</label>
            <input type="text" v-model="uname" />
          </div>
          <div class="form_item form_item_company">
            <label>Company</label>
            <input type="text" v-model="ucompany" />
          </div>
          <div class="form_item form_item_tel">
            <label>Cell Phone</label>
            <input type="tel" maxlength="11" v-model="utel" />
          </div>
          <div class="form_item form_item_email">
            <label>E-Mail</label>
            <input type="email" v-model="uemail" />
            <span>（Optional）</span>
          </div>
          <div class="form_item form_item_industry">
            <label>Industry</label>
            <input
              type="text"
              class="select"
              v-model="uindustry"
              readonly
              @click="showIndustry = true"
            />
            <van-popup
              v-model="showIndustry"
              position="bottom"
              get-container="#app"
            >
              <van-picker
                title=""
                show-toolbar
                item-height="70"
                :columns="industryList"
                @confirm="industryConfirm"
                @cancel="showIndustry = false"
              />
            </van-popup>
          </div>
          <div
            class="form_item other_item"
            v-if="uindustry == 'Other (please specify)'"
          >
            <!-- 其他行业 -->
            <input
              type="text"
              v-model="uindustry_other"
              placeholder="Please input your industry"
            />
          </div>
          <div class="form_item form_item_function">
            <label>Function</label>
            <input
              type="text"
              class="select"
              v-model="urole"
              readonly
              @click="showRole = true"
            />
            <van-popup
              v-model="showRole"
              position="bottom"
              get-container="#app"
            >
              <van-picker
                title=""
                show-toolbar
                item-height="70"
                :columns="roleList"
                @confirm="roleConfirm"
                @cancel="showRole = false"
              />
            </van-popup>
          </div>
          <div
            class="form_item other_item"
            v-if="urole == 'Other (please specify)'"
          >
            <!-- 其他职能 -->
            <input
              type="text"
              v-model="urole_other"
              placeholder="Please input your function"
            />
          </div>
          <div class="form_item form_item_relations">
            <label>Relationship With Us</label>
            <input
              type="text"
              class="select"
              v-model="urelation"
              readonly
              @click="showRelation = true"
            />
            <van-popup
              v-model="showRelation"
              position="bottom"
              get-container="#app"
            >
              <van-picker
                title=""
                show-toolbar
                item-height="70"
                :columns="relationList"
                @confirm="relationConfirm"
                @cancel="showRelation = false"
              />
            </van-popup>
          </div>
          <!-- 其他关系 -->
          <div
            class="form_item other_item_relations"
            v-if="urelation == 'Other (please specify)'"
          >
            <input
              type="text"
              v-model="urelation_other"
              placeholder="Please input"
            />
          </div>
          <div class="form_item form_item_enquiry">
            <label>Your Enquiry</label>
            <textarea cols="30" rows="3" v-model="udemand"></textarea>
          </div>
        </form>
        <div class="btn_contact btn_submit" @click="submitContactInfo">
          <span>Submit</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      uname: "",
      ucompany: "",
      utel: "",
      uemail: "",
      uindustry: "",
      uindustry_other: "", // 其他行业名称
      urole: "",
      urole_other: "", // 其他职能
      urelation: "",
      urelation_other: "", // 其他关系
      udemand: "",
      showIndustry: false,
      industryList: [
        "Automobile",
        "Aerospace",
        "Electrical power and electrical engineering",
        "Construction & building materials",
        "General equipment",
        "Metal manufacturing",
        "Agriculture, forestry, animal husbandry and fishery",
        "Other (please specify)",
      ],
      showRole: false,
      roleList: [
        "Technology/R&D",
        "Sales",
        "Marketing",
        "Procurement",
        "Supply chain",
        "Management",
        "Other (please specify)",
      ],
      showRelation: false,
      relationList: [
        "Clients (potential clients)",
        "Raw material suppliers",
        "Equipment manufacturers",
        "Paint manufacturers",
        "Industry associations/media/education institutions",
        "Other (please specify)",
      ],
      id: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
  },
  methods: {
    // 行业 确认
    industryConfirm(val) {
      this.uindustry = val;
      this.showIndustry = false;
    },
    // 角色 确认
    roleConfirm(val) {
      this.urole = val;
      this.showRole = false;
    },
    // 关系 确认
    relationConfirm(val) {
      this.urelation = val;
      this.showRelation = false;
    },
    // 提交
    async submitContactInfo() {
      if (
        this.uname == "" ||
        this.ucompany == "" ||
        this.utel == "" ||
        this.uindustry == "" ||
        this.urole == "" ||
        this.urelation == "" ||
        this.udemand == ""
      ) {
        return Toast("Please fill in all the information");
      }
      if (!/^1[3456789]\d{9}$/.test(this.utel)) {
        return Toast("Please enter the correct phone number");
      }
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0,
        overlay: true,
      });
      let timestamp = this.getTimestamp();
      let mdtxt = this.$md5(
        `ehaj8eynamzi0o1y2namnz_${timestamp}`
      ).toLowerCase();
      let params = {
        timestamp,
        sign: mdtxt.substring(5, 15),
        username: this.uname,
        company: this.ucompany,
        phone: this.utel,
        email: this.uemail,
        industry: this.uindustry + "/" + this.uindustry_other,
        job: this.urole + "/" + this.urole_other,
        relationship: this.urelation + "/" + this.urelation_other,
        demand: this.udemand,
        version: "英文",
      };
      let res = await this.$http.post("/register", params);
      Toast.clear();
      if (res.data.code == 200) {
        Toast("Submitted successfully");
        this.goBack();
      } else {
        Toast(res.data.msg);
      }
    },
    // 返回
    goBack() {
      // 隐藏场景控制
      this.$store.commit("updateEnScenceCtrlShow", false);
      this.$router.replace(`/en/lab/${this.id}`);
    },
    // 获取当前秒级时间戳
    getTimestamp() {
      let date = new Date();
      let time = parseInt(date.getTime() / 1000);
      return time;
    },
  },
};
</script>
<style lang="less" scoped>
.contact {
  font-size: 1.7rem;
  font-family: "SourceHanSansCN";
  font-weight: normal;
  .contact_container {
    position: relative;
    width: 670px;
    height: 1030px;
    background: url("@/assets/img/contactbg.png") no-repeat center center;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-bottom: 2rem;
    .title {
      position: absolute;
      top: 0.5rem;
      right: 1.2rem;
      font-weight: bold;
    }
    .from_container {
      position: relative;
      width: 100%;
      height: 85%;
      margin-top: 3rem;
      overflow-x: hidden;
      overflow-y: scroll;
      .contact_form {
        .form_item {
          width: 100%;
          margin-bottom: 2rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 1.5rem;
          label {
            padding-right: 1rem;
          }
          input,
          textarea {
            border-style: none;
            border: 0;
            background: #ffffff;
            border-radius: 10px;
            font-size: 1.6rem;
            color: #000000;
          }
          input {
            width: 320px;
            height: 55px;
            text-indent: 1rem;
          }
          input.select {
            cursor: pointer;
            background: #ffffff url("@/assets/img/icon.png") no-repeat right
              center;
            background-size: 4% auto !important;
            background-position: right 4% top 1.5rem;
          }
          textarea {
            width: 370px;
            height: 100px;
            padding: 1rem;
          }
          span {
            color: #999999;
            font-size: 1.4rem;
          }
        }
        .form_item_company,
        .form_item_tel,
        .form_item_industry,
        .form_item_function,
        .other_item {
          width: 472px;
          justify-content: space-between;
        }
        .form_item_name,
        .form_item_email {
          input {
            width: 380px;
          }
        }
        .form_item_industry,
        .form_item_function {
          input {
            width: 340px;
          }
        }
        .other_item {
          justify-content: flex-end;
          input {
            width: 360px;
          }
        }
        .form_item_relations {
          input {
            width: 300px;
          }
        }
        .other_item_relations {
          width: 580px;
          justify-content: flex-end;
          input {
            width: 300px;
          }
        }
        .form_item:last-child {
          align-items: flex-start;
        }
      }
      .btn_submit {
        margin-top: 1rem;
      }
    }
  }
  .btn_contact {
    display: table;
    background: #22a0d4;
    color: #fff;
    border-radius: 2rem;
    padding: 0.3rem 2rem;
  }
  .btn_goback {
    align-self: flex-start;
    margin: 2rem 0 1rem 2.5rem;
    padding: 0.3rem 3rem;
  }
}
@media only screen and (min-height: 1350px) {
  .contact {
    .contact_container {
      margin-bottom: 4rem;
    }
  }
}
@media only screen and (min-height: 1440px) {
  .contact {
    .btn_goback {
      margin-bottom: 2rem;
    }
    .contact_container {
      margin-bottom: 6rem;
    }
  }
}
</style>
<style>
.van-picker__cancel,
.van-picker__confirm,
.van-picker__title,
.van-picker-column {
  font-size: 2rem !important;
}
.van-picker__title {
  line-height: 36px !important;
}
.van-picker__toolbar {
  height: 70px !important;
}
.van-radio {
  align-items: flex-start !important;
}
.van-radio__label {
  line-height: 1.2 !important;
}
</style>
